
//获取两大盒子
var box1 = document.querySelector('.main .w');
var box2 = document.querySelector('.tab .w');
//获取地址栏传进的参数
var search = location.search
//获取当前的账号
var name1=getCookie('name');
//获取账号名称节点
var per = document.querySelector('.list1').children[1].lastElementChild;
//账号显示
if(name1){
  per.innerHTML = name1;
}else{
  per.innerHTML = '亲，请登录';
}

//账号切换
var zhanghao = document.querySelector('.list1').children[1]
    zhanghao.onclick=function(){
        if(name1){
          var c=confirm("您已登录，是否切换账号")
          if(c){
            delCookie('name',t1=-1);
            location="../02login/login.html"
          }
        }else{
          location="../02login/login.html"
        }
    }
//跳转购物车
var car = document.querySelector('.list2').children[1]
    car.onclick=function(){
      if(name1){
        location="../06shopcar/shopcar.html"
      }else{
        alert("您还未登陆，请登录")
        location="../02login/login.html"
      }
    }

var o1
//判断是否传进参数
if(search){
    //获取当前参数的值
    var id = search.split('=')[1];
    (async function(){
        var txt = await PromiseAjax({
            url:'./xiangqing.php',
            data:'id='+id
        })
        //把拿到的数据字符串转为js对象
        o1=eval('('+txt+')');
        render()
        //获取放大镜操作对象
        var boxs=document.querySelector('.boxs')
        //放大镜
        new Fdj(boxs)
        loupe()
       //tab选项卡
        tab()
    })()

}else{
    alert("非法进入")
    location="../01index/index.html"
}


function render(){
    
    var str1=`
    <div class="left">
    <div class="boxs">
        <div class="box1">
            <img src="${o1.goods_small_logo}" alt="">
            <div class="mark"></div>
        </div>
        <div class="box2">
            <img src="${o1.goods_small_logo}" alt="">
        </div>
    </div>
    <ul class="lis">
        <li class="bg"><img src="${o1.goods_small_logo}" alt=""></li>
        <li><img src="https://gd1.alicdn.com/imgextra/i1/2832394201/O1CN01VutOaZ1gu6cn717QO_!!2832394201.jpg_400x400.jpg" alt=""></li>
        <li><img src="https://gd2.alicdn.com/imgextra/i2/2832394201/O1CN01lEsv8M1gu6cs0OltF_!!0-item_pic.jpg_400x400.jpg" alt=""></li>
        <li><img src="https://gd4.alicdn.com/imgextra/i4/2832394201/O1CN01h7oI7V1gu6cqCeN5j_!!2832394201.jpg_400x400.jpg" alt=""></li>
        <li><img src="https://gd1.alicdn.com/imgextra/i1/2832394201/O1CN01QsKn1A1gu6cykVTSI_!!2832394201.jpg_400x400.jpg" alt=""></li>
    </ul>
</div>
<div class="right">
    <div class="r-title">
        <h1>${o1.goods_name}</h1>
        <p>官方直营 正品保证</p>
    </div>
    <div class="ad">
        <span>聚划算</span>
        <p>此商品正在参加聚划算，<strong>37分48秒</strong>后结束，请尽快购买</p>
    </div> 
    <div class="message">
        <p>价格：<span>￥${o1.goods_price}</span></p>
        <p>运费：<span>快递包邮</span></p>
        <div class="size">
            <span>尺码</span>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">S</button>
                <button type="button" class="btn btn-default">M</button>
                <button type="button" class="btn btn-default">L</button>
            </div>
        </div>
        <div class="btns">
            <button type="button">加入购物车</button>
            <button type="button">立即购买</button>
        </div>
    </div>
       
</div>
    `
    box1.innerHTML = str1

    var str2=`
            <ul class=tab-nav>
                <li class="bg2">商品详情</li>
                <li>评价</li>
            </ul>
            <div class="show" id="boxtext">
            ${o1.goods_introduce}
            </div>
            <div id="boxtext">
                <img src="./imges/pingjia.png" alt="">
            </div>
    `
    box2.innerHTML = str2
}


box1.onclick=function(e){
        //事件对象兼容
        var e = e || window.event
        //获取操作目标
        var tg=e.target || e.srcElement

    if(tg.innerHTML=="加入购物车"){
        //判断name是否有值
        if(name1){
            //获取该账号在localstorage中储存的信息
            var ar1=localStorage.getItem(name1) || '[]'
            //把当前获取的内容转数组对象
            ar1=eval('('+ar1+')');
            console.log(ar1);
            //判断数组中是否有值
            if(ar1.length>0){
                //设置开关判断，判断商品是否存在
                var bool=false
                //遍历数组中元素
                ar1.forEach(item=>{
                    console.log(item);
                    //判断当前商品是否存在于localstorage中
                    if(o1.goods_id==item.goods_id){
                        item.cart_number++
                        console.log(item.cart_number);
                        bool=true
                    }
                    
                })
                //判断开关判断
                if(bool){
                    localStorage.setItem(name1,JSON.stringify(ar1))
                    var b=confirm("该商品购物车已存在，是否跳转到购物车页面")
                    if(b){
                        location="../06shopcar/shopcar.html"
                    }
                }else{
                    //修改当前商品的数量，并追加到空数组中
                    o1['cart_number']=1
                    ar1.push(o1)
                    //把当前数组加到localstorage中
                    localStorage.setItem(name1,JSON.stringify(ar1))
                    var a=confirm("您已添加一件新商品，是否跳转到购物车页面")
                    if(a){
                        location="../06shopcar/shopcar.html"
                    }
                }
            }else{
                //修改当前商品的数量，并追加到空数组中
                o1['cart_number']=1
                console.log();
                ar1.push(o1)
                console.log(o1);
                //把当前数组加到localstorage中
                localStorage.setItem(name1,JSON.stringify(ar1))
                    var a2=confirm("商品添加成功，是否跳转到购物车页面")
                    if(a2){
                        location="../06shopcar/shopcar.html"
                    }
            }

        }else{
            alert('您还未登录，请登录')
            //获取当前地址并跳转登录页
            var url=location.href
            location="./02login/login.html?url="+url
        }
    }
}
 
//Tab选项卡
function tab(){
    //获取操作对象
    var lis=document.querySelectorAll(".tab-nav >li")
    var boxs=document.querySelectorAll("#boxtext")
    //遍历每个li对象
    for(let i=0;i<lis.length;i++){
        //给每个li对象绑定点击事件
        lis[i].onclick=function(){
            //把所有li和h1标签中的class属性值清空
            for(var j=0;j<lis.length;j++){

                lis[j].className=''
                boxs[j].className=''
            }
            //给指定的li和h1标签添加class属性值
            lis[i].className='bg2'
            boxs[i].className='show'
        }
    }
}

//放大镜
function loupe(){
    //获取放大镜操作对象
    var boxs=document.querySelector('.boxs')
    var leftbox=document.querySelector('.box1')
    var rightbox=document.querySelector('.box2')
    var lis=document.querySelector('.lis').children
    for(i=0;i<lis.length;i++){
        lis[i].onclick=function(){
            for(j=0;j<lis.length;j++){
                lis[j].className=''
            }
            var url = this.lastElementChild.getAttribute('src')
            leftbox.firstElementChild.setAttribute('src',url)
            rightbox.firstElementChild.setAttribute('src',url)
            this.className = 'bg'
        }
    }
   
    //放大镜
    // new Fdj(boxs)
}
